<template>
  <view class="container">
    <view class="bg-pic">
      <image :src="imagePath + '/app4/bg1.jpg'" />
    </view>

    <view class="mid">
      <image :src="imagePath + '/app4/icon1.png'" />
    </view>

    <view class="footer">
      <navigator url="/pages/app4/list" class="navigator">
        点击开始答题
      </navigator>
      <navigator url="/pages/app4/haibao" class="navigator">
        获取海报
      </navigator>
    </view>
  </view>
</template>

<script>
let app = getApp();
export default {
    data() {
        return {
            imagePath: app.globalData.imagePath
        };
    } /**生命周期函数--监听页面加载*/,
    onLoad: function (options) {},
    /**生命周期函数--监听页面初次渲染完成*/
    onReady: function () {},
    methods: {}
};
</script>
<style>
.container {
    width: 100%;
    height: 100vh;
    padding: 50rpx 10rpx;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.bg-pic {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.bg-pic > image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mid {
    position: relative;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: center;
}
.mid image {
    width: 340rpx;
    height: 653rpx;
}

.footer {
    position: relative;
    z-index: 10;
    width: 80%;
    margin: 100rpx auto 0;
    text-align: center;
}
.footer navigator {
    width: 100%;
    background: #bd150d;
    border-radius: 45rpx;
    padding: 20rpx 0;
    font-size: 40rpx;
    font-weight: bold;
    color: #fff;
    letter-spacing: 2px;
    text-shadow: 0 9px 9px rgba(0, 0, 0, 0.36);
    box-shadow: 5px 2px 15px rgba(0, 0, 0, 0.2) inset;
}
.footer navigator:last-child {
    margin-top: 20rpx;
}
</style>
